import _ from "lodash";

const generate = require('nanoid/generate')
import {getDefaultProps, styleMap} from '../libs/props.js'
import {
  pxConversionMm,
  mmConversionPx,
  getViewTypeByType,
  getViewDescByType,
  deepTrav,
  getModuleViewType
} from '../utils/utils'

export default {
  // 初始化页面属性
  initPage(state, pageInfo) {
    state.page = pageInfo
    deepTrav(state.page, (objc, key) => {
      if (typeof objc === 'object' && objc.type) {
        objc.viewType = getViewTypeByType(objc.type)
        objc.desc = getViewDescByType(objc.type)
        objc.dragable = true
        if (!objc.uuid) {
          objc.uuid = generate('1234567890abcdef', 10)
        }
        if (key === 'docHeader' || key === 'pageHeader' || key === 'docBody' || key === 'pageFooter' || key === 'docFooter') {
          if (!Array.isArray(objc.subViews)) {
            objc.subViews = []
          }
        }
      }
    })
  },
  // 初始化可选对象
  initOptionItems(state, options) {
    // 补全默认属性
    let optionsObject = options ? options.map(item => {
      let optionItem = {
        ...state.widgetSetting[item.viewType], ...item,
        style: {...state.widgetSetting[item.viewType].style, ...(item.style || {})}
      }
      return optionItem
    }) : []

    state.optionItems = optionsObject
  },

  initModuleItems(state, modules) {
    // 补全默认属性
    let modulesObject = modules ? modules.map(item => {
      let moduleItem = {
        title: item,
        ...state.widgetSetting[getModuleViewType()]
      }
      return moduleItem
    }) : []
    state.moduleOptions = modulesObject
  },

  // 初始化选中对象
  initActive(state) {
    state.activeElement = getDefaultProps()
  },

  // 设置 mousemove 操作的初始值
  initmove(state, payload) {
    state.startX = payload.startX
    state.startY = payload.startY
    state.originX = payload.originX
    state.originY = payload.originY
    state.moving = true
  },

  // 选中元件与取消选中
  select(state, temp) {
    state.uuid = temp.uuid
    if (temp.uuid === -1) {
      state.activeElement = getDefaultProps()
      state.viewType = 'page'
    } else {
      deepTrav(state.page, (objc, key) => {
        if (typeof objc === 'object' && objc.type && objc.uuid === temp.uuid) {
          state.activeElement = objc
          state.viewType = objc.viewType
          return true
        }
      })
    }
  },

  // 元件移动结束
  stopmove(state) {
    state.moving = false
  },

  // 移动元件
  move(state, track) {
    var target = state.activeElement
    var dx = pxConversionMm(track.x - state.startX)
    var dy = pxConversionMm(track.y - state.startY)
    var left = state.originX + dx * 100 / state.zoom
    var top = state.originY + dy * 100 / state.zoom

    target.rect.x = left > 0 ? left : 0
    target.rect.y = top > 0 ? top : 0
  },

  // 调整元件尺寸
  resize(state, track) {
    var dx = track.x - state.startX
    var dy = track.y - state.startY
    var value

    if (track.type === 'right') {
      value = state.originX + Math.floor(dx * 100 / state.zoom)
      state.activeElement.width = value > 10 ? value : 10
      return
    }

    if (track.type === 'down') {
      value = state.originX + Math.floor(dy * 100 / state.zoom)
      state.activeElement.height = value > 10 ? value : 10
      return
    }

    if (track.type === 'left') {
      var left = state.originX + Math.floor(dx * 100 / state.zoom)
      var width = state.originY - Math.floor(dx * 100 / state.zoom)
      state.activeElement.left = left > 0 ? left : 0
      state.activeElement.width = width > 10 ? width : 10
      return
    }

    if (track.type === 'up') {
      var top = state.originX + Math.floor(dy * 100 / state.zoom)
      var height = state.originY - Math.floor(dy * 100 / state.zoom)
      state.activeElement.top = top > 0 ? top : 0
      state.activeElement.height = height > 10 ? height : 10
    }
  },

  // 更新元件初始 top 值
  updateSrollTop(state, top) {
    state.top = top
  },

  // 页面缩放
  zoom(state, val) {
    state.zoom = val
  },

  // 删除选中元件
  delete(state, uuid) {
    var type = state.viewType
    if (type === 'page') return

    deepTrav(state.page, (objc, key, parent) => {
      if (typeof objc === 'object' && objc.type && objc.uuid === uuid) {
        if (Array.isArray(parent)) {
          parent.splice(key, 1)
        } else {
          parent[key] = null
        }
      }
    })
    // 重置 activeElement
    state.activeElement = getDefaultProps()
    state.viewType = 'page'
    state.uuid = -1
  },

  // 添加组件
  addTempItem(state, item) {
    let def = {uuid: generate('1234567890abcdef', 10)}
    let setting = JSON.parse(JSON.stringify(item))
    setting.desc = getViewDescByType(setting.type)
    if (state.activeElement.type != 1) {
      return
    }
    if (state.activeElement === state.page.docHeader
      || state.activeElement === state.page.pageHeader
      || state.activeElement === state.page.docBody
      || state.activeElement === state.page.pageFooter
      || state.activeElement === state.page.docFooter) {
      if (!Array.isArray(state.activeElement.subViews)) {
        state.activeElement.subViews = []
      }
      state.activeElement.subViews.push(Object.assign(setting, def))
      item.uuid = setting.uuid
    }
  },

  // 添加页面模块
  addModuleItem(state, item) {
    let def = {uuid: generate('1234567890abcdef', 10)}
    let setting = JSON.parse(JSON.stringify(item))
    const width = state.page.pageWidth - (state.page.padding?.left || 0 ) - (state.page.padding?.right || 0 )
    setting.rect = {
      x: 0,
      y: 0,
      width: width,
      height: 50
    }
    setting.desc = getViewDescByType(setting.type)
    setting.subViews = []
    if (!state.page[item.title]?.viewType) {
      state.page[item.title] = Object.assign(setting, def)
      item.uuid = setting.uuid
    }
  },

  // 更新数据
  updateData(state, {uuid, value}) {
    let widget = null
    deepTrav(state.page, (objc, key, parent) => {
      if (typeof objc === 'object' && objc.type && objc.uuid === uuid) {
        widget = objc
      }
    })
    widget ? widget.value = value : ''
  },

  // 设置模板Id
  setTempId(state, id) {
    state.tempId = id
  },

  setLoading(state, flag) {
    state.loading = flag
  },
  // 设置模板默认属性
  setWidgetSetting(state, settingObj) {
    state.widgetSetting = settingObj
  }

}
